<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->

  <!-- meta 安全配置 -->
  <!-- <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> -->
  <link href="./styles.css" rel="stylesheet">
  <title>Hello World!</title>

  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div><video ref="preview" style="width: 500px; height: 300px;" controls autoplay></video></div>
    <div class="btn-group" role="group" style="gap: 10px;">
      <button type="button" class="btn btn-danger" @click="startRecording" :disabled="isRecording">开始录制</button>
      <button type="button" class="btn btn-danger" @click="stopRecording" :disabled="!isRecording">结束录制</button>
      <button type="button" class="btn btn-primary">sdsd</button>
    </div>
  </div>
  <!-- You can also require other files to run in this process -->
  <!-- <script src="./node_modules/vue/dist/vue.global.prod.js"></script> -->
  <script src="./renderer.js"></script>

</body>

</html>